ทดสอบสร้างระบบล็อกอินด้วย AWS Cognito (ง่ายมากๆ)

สร้างระบบล็อกอินง่ายๆ ด้วย Serverless service ของ AWS Cognito

#Amazon Cognito

#Thai Language

#Classmethod Thailand

#AWS

#AWS Serverless

Supanut Akaram

2024.08.13

วันนี้ผมจะมาพาทุกคนมาทำความรู้จักและสร้าง user directory สำหรับ web หรือ mobile app authentication, authorization หรือจะให้พูดเป็นภาษาเข้าใจง่ายๆก็คือระบบสร้าง ID Password ครับ

โดยที่บทความนี้จะเน้นความง่ายเป็นหลัก ให้ทุกคนที่ได้ลองทำตามทำตามได้เสร็จเร็วๆ เพื่อให้เห็นภาพว่า AWS Cognito นั้นเป็น Service แบบไหนกันครับ

โดยถ้าพูดถึงข้อดีของ Cognito ที่ผมได้ลองใช้งานแล้วเห็นกับตัวคือมีดังนี้ครับ

ใช้งานง่าย
เป็น Serverless Service (หมายความว่าเราไม่จำเป็นต้องกังวลเรื่องปัญหา Service รับ Workload หนักๆไม่ได้)
มีความปลอดภัยและ Scalable
มี Free tier อยู่ที่ 50,000 User Amazon Cognito Pricing

เริ่มลงมือ

ก่อนอื่นให้เราทำการเปิด
Amazon Cognito Console
จากนั้นให้เรากด Create user pool
cog1

จากนั้นในหัวข้อ Cognito user pool sign-in options ให้เรา✅Email(เป็นหัวข้อ)
กด Next
cog2

ในหัวข้อ Multi-factor authentication ให้เราเลือก No MFA เพื่อง่ายต่อการตั้งค่า(สามารถเปิดได้ในภายหลัง)
กด Next
cog3

ในหน้าต่าง Configure sign-up experience นี้ไม่ต้องเปลี่ยนการตั้งค่าอะไร กด Next
cog4

ในหัวข้อ Email provider ให้เราเลือก Send email with Cognito โดยการตั้งค่านี้จะใช้สำหรับการตั้งค่าชั่วคราวเหมาะสำหรับผู้ที่ต้องการทดสอบการส่งอีเมลที่ไม่ต้องตั้งค่าอย่างอื่น โดยมีข้อจำกัดที่จะส่งได้อยู่ที่ 50 Email ต่อวัน
ในหัวข้อ FROM email address ให้เลือก no-reply@verificationemail.com
กด Next
cog5

ในหัวข้อ User pool name ให้ทำการตั้งชื่อ (ไม่สามารถเปลี่ยนได้ในภายหลัง)
ให้เรา ✅Use the Cognito Hosted UI
cog6

ในหัวข้อ Cognito domain ให้เราตั้งชื่อ (ต้องใช้ชื่อที่มีความ Unique หน่อย ถ้าซ้ำจะไม่ผ่าน)
cog7
ตั้งชื่อ App client name
ในหัวข้อ Allowed callback URLs > URL ให้เรากรอก http://localhost:8000/logged_in.html

โดยสำหรับหน้าต่าง logged_in.html เราจะสร้างในขั้นตอนถัดไป

cog8
จากนั้นกด Advanced app client settings แล้วในหัวข้อ Allowed sign-out URLs - optional ให้เรากด Add sign-out URL แล้วกรอก http://localhost:8000/logged_out.html

กด Next
cog9
กด Create user pool
cog10

รัน Server

Requirement

มีการติดตั้ง python3
สามารถใช้งาน terminal ได้
ในบทความใช้ vscode

สำหรับคนที่อ่านบทความนี้สามารถใช้วิธีเปิด server แบบอื่นได้ แต่สำหรับผมขอใช้งานวิธีนี้ครับ

ก่อนอื่นให้เราทำการสร้างไฟล์ขึ้นมา 3 ไฟล์ใน Folder เดียวกัน โดยผมทำการสร้างใน /tutorial
cog22

แล้วแต่ละไฟล์ มีเนื้อหาดังนี้

index.html

<body>
    <h1>Welcome to My Simple HTML Page</h1>
    <p><a href="#">Register or Login</a></p>
</body>

logged_in.html

<body>
    <h1>Congratulations!</h1>
    <p>You are logged in now</p>
    <p><a href="#">Logout</a></p>
</body>

logged_out.html

<body>
    <h2>You are logged out now!</h2>
    <p><a href="#">Log back in</a></p>
</body>

จากนั้นให้เราเข้ามาที่หน้าต่าง User pools ที่เราสร้างขึ้น แล้วเลือกไปที่หัวข้อ App integration

cog11

แล้วเลื่อนลงมาล่างสุด กดที่ App client ที่เราสร้างขึ้น กดที่ชื่อที่่เราสร้างขึ้น

cog12

จากนั้นค้นหาหัวข้อ Hosted UI แล้วกด View Hosted UI

cog13

จากนั้นให้เรา Copy URL

cog23

นำลิงค์ที่ก๊อปไปใส่ใน {ใส่ที่นี่} index.html และ logged_out.html
อย่าลืมลบ { } ออก

index.html

<body>
    <h1>Welcome to My Simple HTML Page</h1>
    <p><a href="{ใส่ที่นี่}">Register or Login</a></p>
</body>

logged_out.html

<body>
    <h2>You are logged out now!</h2>
    <p><a href="{ใส่ที่นี่}">Log back in</a></p>
</body>

ส่วนใน logged_in.html ให้เราแก้ข้อมูลลิ้งค์ที่ก็อปปี้มาเป็นตามนี้

รายการที่เปลี่ยน

login > logout
response_type=code&scope=email+openid+phone& > (ลบออก)
redirect_uri > logout_uri
http://localhost:8000/logged_in.html > http://localhost:8000/logged_out.html

https://xxx.auth.ap-southeast-1.amazoncognito.com/login?client_id=xxx&response_type=code&scope=email+openid+phone&redirect_uri=http://localhost:8000/logged_in.html

↓

https://xxx.auth.ap-southeast-1.amazoncognito.com/logout?client_id=xxx&logout_uri=http://localhost:8000/logged_out.html

แล้วนำข้อมูลที่แก้ไปใส่ที่ {ใส่ที่นี่}

logged_in.html

<body>
    <h1>Congratulations!</h1>
    <p>You are logged in now</p>
    <p><a href="{ใส่ที่นี่}">Logout</a></p>
</body>

จากนั้นเปิด Terminal แล้วไปยัง Directory มีไฟล์เหล่านี้อยู่(ในบทความนี้เราทำการตั้ง Directory ว่าชื่อ tutorial)แล้วใช้คำสั่งต่อไปนี้

สำหรับใครที่ไม่มี python ให้ทำการติดตั้งก่อน

แล้วทำการใช้คำสั่งด้านล่างนี้กับโฟล์เดอร์ที่เราทำการสร้าง ไฟล์ HTML ขึ้นมา
ในกรณีของผมคือ "C:/xxx/tutorial"

tutorial$ python3 -m http.server -d "C:/xxx/tutorial"

ลองใช้งาน

ต่อจากนี้ผมจะมาพาใช้งาน โดยใช้งานผ่าน Hosted UI ของ Cognito ก็ได้
แต่เพื่อความต่อเนื่องจากหัวข้อที่แล้วที่เราทำไป ให้เราไปที่ http://localhost:8000/index.html

แล้วกด Register or Login
cog24

ตอนนี้เรายังไม่มี User เพราะฉนั้นให้เรากด Sign up

cog14

ทำการกรอก Email Password กด Sign up (ให้ใช้ Email ที่มีอยู่จริง เพราะต้องทำการยืนยันในขั้นตอนต่อไป)

cog15

ไปรับโค้ดได้ใน Email ที่กรอกไว้ได้ครับ

cog16

เมื่อเรานำ verification code ไปกรอก แล้วกด Confirm account เราจะถูกส่งไปยังหน้าต่างด้านล่างจะสังเกตได้ว่าเราถูกส่งไปยัง http://localhost:8000/logged_in.html เหมือนกับที่เรากรอกข้อมูลใน Allowed callback URLs แล้วตามด้วย code ที่ตามด้วยการแสดงตัวตนของเรา

เราสามารถกด logout เพื่อทดสอบการล็อกอินใหม่ได้

cog25
cog26

และเราสามารถไปดูในหัวข้อ Users ใน User pool ที่เราสร้างขึ้น จะเห็น Users เราที่ถูกสร้างขึ้นเมื่อกี้
โดยหากยังไม่มี User ขึ้น ให้เรากด ลูกศรวนในภาพเพื่อ Refresh ได้

cog18

สำหรับใครที่อยากไปต่อ

สำหรับใครที่อยากลงลึกไปกว่านี้ ผมขอแนะนำ บทความต่อไปนี้ เป็น Tutorial สอนการสร้างเว็บ โดยมีการใช้ Cognito เป็นส่วนประกอบ สำหรับให้เห็นภาพของการทำงานของ Service นี้มากขึ้น

Build a Serverless Web Application using Generative AI